const DISTANCE = 150;
const map = new WeakMap;
const ob = new IntersectionObserver((entries: any) => {
  for (const entry of entries) {
    console.log(entry);
    if (entry.isIntersecting) {
      const animation = map.get(entry.target);
      if (animation) {
        animation.play();
      }
    }
  }
});
export default {
  mounted(el) {
    const animation = el.animate().animate([
      {
        transform: `translateY(${DISTANCE}px)`,
        opacity: 0.5
      },
      {
        opacity: 1,
        transform: "translateY(0)"
      }
    ], {
      duration: 500,
      easing: "ease-in-out",
      fill: "forwards"
    });
    animation.pause;
    ob.observe(el);
    map.set(el, animation);
  },
  unmounted(el) {
    ob.unobserve(el);
  }
};